<template>
  <!-- 主体 -->
  <div class="module-box">
    <!-- 等比例分配 边框第一列 -->
    <div style="flex:0 1 25%;">

    </div>

    <!-- 边框二列 -->
    <div style="flex:0 1 50%;">
      <div>
        <button class="function1" style="margin-left: 50px" @click="getIp(1)">摄像头1</button>
        <button class="function1" @click="getIp(2)">摄像头2</button>
        <button class="function1" @click="getIp(3)">摄像头3</button>
        <button class="function1">机房6</button>
      </div>
      <dv-border-box-9 style="width:100%;height:550px;">
        <!--        <img :src="url" alt="Video" style="height: 550px;width: 100%">-->
        <img ref="" style="width: 100%; height: 550px" alt="视频" :src="url"/>
<!--        <img ref="" style="width: 100%; height: 550px" alt="视频" src="http://192.168.1.40:8087/video"/>-->

      </dv-border-box-9>
      <dv-border-box-8 style="width:100%;height:300px;">
        <div class="aa">
          <dv-border-box-10 style="width:70%;height:300px;">
            <div class="aa">
              <dv-border-box-10 style="width:70%;height:300px;">
                <div class="aa">
                  <div style="width: 50%;height:300px">
                    <!--遥控控制区域-->
                    <Remote :ws="ws" :sendMessage="sendMessage"/>
                  </div>
                  <dv-border-box-10 style="width: 50%;height:300px">
                    <dv-border-box-10 class="aa">
                      <!-- 生降区域-->
                      <div style="width: 90%;height:100px;margin-left:10px">
                        <div class="aa" style="height: 100%; display: flex;
                        justify-content: center; align-items: center;">
                          <button class="upDown" style="border-radius: 10px 0 0 10px;">
                            <img src="../../assets/img/升降/加号.png" alt="" style="margin-left: 20px;margin-top: 10px">
                          </button>
                          <button class="upDown" style="width: 40%;border-radius: 0 0 0 0;">
                            <img src="../../assets/img/升降/升降.png" alt="" style="margin-left: 10px;margin-top: 10px">
                          </button>
                          <button class="upDown" style="border-radius: 0 10px 10px 0;">
                            <img src="../../assets/img/升降/减号.png" alt=""
                                 style="margin-right: 20px;margin-top: 10px">
                          </button>
                        </div>
                      </div>

                      <!--  调式区域-->
                      <div style="width: 90%;height:100px;margin-left:10px">
                        <div class="aa" style="height: 100%; display: flex;
                        justify-content: center; align-items: center;">
                          <button class="upDown" style="border-radius: 10px 0 0 10px;">
                            <img src="../../assets/img/升降/加号.png" alt="" style="margin-left: 20px;margin-top: 10px">
                          </button>
                          <button class="upDown" style="width: 40%;border-radius: 0 0 0 0;">
                            <img src="../../assets/img/升降/调节.png" alt="" style="margin-left: 10px;margin-top: 10px">
                          </button>

                          <button class="upDown" style="border-radius: 0 10px 10px 0;">
                            <img src="../../assets/img/升降/减号.png" alt=""
                                 style="margin-right: 20px;margin-top: 10px">
                          </button>
                        </div>
                      </div>

                      <!--  开关等区域-->
                      <div style="width: 90%;height:100px;margin-left: 10px">
                        <div class="aa" style="height: 100%; display: flex;
                        justify-content: center; align-items: center;">
                          <button class="functionControl">
                            <img src="../../assets/img/开关.png" alt="" @click="on_off()">
                          </button>
                          <button class="functionControl">
                            <img src="../../assets/img/开灯.png" alt="" @click="wiper()">
                          </button>
                          <button class="functionControl">
                            <img src="../../assets/img/机器人.png" alt="">
                          </button>
                          <button class="functionControl">
                            <img src="../../assets/img/充电桩.png" alt="">
                          </button>
                        </div>
                      </div>
                    </dv-border-box-10>
                  </dv-border-box-10>
                </div>
              </dv-border-box-10>

              <!--旋转控制-->
              <dv-border-box-10 style="width:30%;height:300px;">
                <Disc :ws="ws" :sendMessage="sendMessage"/>
              </dv-border-box-10>
            </div>
          </dv-border-box-10>
          <!--预警区域-->
          <dv-border-box-10 style="width:30%;height:300px;">
            预警
          </dv-border-box-10>
        </div>

      </dv-border-box-8>
    </div>


    <!-- 边框第三列 -->
    <div style="flex:0 1 25%;">
      <!--通用功能-->
<!--      <dv-border-box-10 style="width:100%;height:500px;">-->
      <div style="width:100%;height:400px;">
        <el-empty description="摄像头未连接" :image="url"></el-empty>
      </div>
<!--      <dv-border-box-10/>-->

      <!--数据轮播-->
      <div style="width:100%;height:400px;">
        <BaiduMap style="width: 100%;height: auto"/>

      </div>
    </div>
  </div>
</template>

<style>

.aa {
  display: flex;
  justify-content: space-between;
}
</style>

<script>
import Disc from "../../views/homePage/disc.vue";
import Remote from "../../views/homePage/remote.vue";

import BaiduMap from "@/views/homePage/baiduMap.vue";
import axios from 'axios';
import {ref} from 'vue';


export default {

  methods: {
    // 开关
    on_off() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        // 如果WebSocket连接已经存在并且状态为OPEN，则关闭连接
        this.ws.close();
        this.ws = null;
        this.url = require('@/assets/img/image2.png');
        alert("连接已关闭");
      } else {
        console.log("来了")
        // 开发环境
        // this.ws = new WebSocket("ws://192.168.1.40:8082/video_socket");

        // 小车
        this.ws = new WebSocket("ws://127.0.0.1:8080/websocket");

        // 生产环境
        // this.ws = new WebSocket("ws://192.1.5.17:8082/video_socket");
        this.ws.onopen = function () {
          alert("连接成功");
        };

        this.ws.onerror = function () {
          alert("发生错误连接");
        };

        // this.ws.onmessage = (event) => {
        //   // 将base64图像数据设置为video元素的src
        //   // console.log("到")
        //   this.url = ref('data:image/jpeg;base64,' + event.data).value;
        // }

        this.ws.onmessage = (event)=> {
          const imageData = event.data;
          this.renderVideoAsync(imageData);
        };
      }
    },
    // 雨刷
    wiper() {
      axios.get('http://192.168.1.40:8080/open_wiper')
          .then(response => {
            console.log('请求成功', response);
          })
          .catch(error => {
            console.error('请求失败', error);
          });
    },
    inspection() {
      axios.get('http://192.168.1.40:8080/open_wiper')
          .then(response => {
            console.log('请求成功', response);
          })
          .catch(error => {
            console.error('请求失败', error);
          });
    },
    async sendMessage(message) {
      console.log(message );
      this.ws.send(message);
    },
    async renderVideoAsync(base64Data) {
      return new Promise((resolve) => {
        // renderVideo(base64Data);
        this.url = ref('data:image/jpeg;base64,' + base64Data).value;
        setTimeout(() => {
          // 执行需要延时执行的代码
          resolve();
        }, 50);
      });
    },
    getIp(ip) {
      console.log("摄像头" + ip);
      // /cameras/{id}
      this.cameraIp = ip;

      // 发送GET请求
      axios.get('http://192.168.1.46:8085/cameras/' + ip, {
        params: {
          ip: ip
        }
      })
          .then(response => {
            this.cameraIp = response.data;
            console.log('获取摄像头信息成功', response.data.ip);
            // 处理获取到的摄像头信息
          })
          .catch(error => {
            console.error('获取摄像头信息失败', error);
          });
    }
  },
  components: { // 引入组件
    Disc,
    Remote,
    BaiduMap

  },
  data() {
    return {
      // 传入的数据
      dataChart: [
        {name: '标题1', value: 100},
        {name: '标题2', value: 200},
        {name: '标题3', value: 300},

      ],
      // url:'@/assets/img/image2.png',
      url: require('@/assets/img/image2.png'),

      // 摄像头ip地址
      cameraIp: "192.168.1.40:8082",
      colorsChart: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
      sum: 7,
      rum: 3,
      ws: null,
    }
  }
}
</script>
